<script>
import { getMapData } from "@/api/mapdata";
export default {
    name: 'FooterCard',
    data() {
        return {
            option1: {
                title: {
                    text: '各地销售额',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        //console.log(params)
                        if (params.seriesIndex == 0) {
                            return params.seriesName + '<br/>' + params.marker + params.data.value[2].name + ': ' + params.data.value[2].value
                        } else {
                            const city = params.data.value[2].name
                            const value = params.data.value[2].value
                            const color = params.color
                            const span = '<span style="color:' + color + '">'
                            return span + city + '销售额:' + value + '</span>'
                        }

                    },
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                featureType: 'water',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'land',
                                elementType: 'all',
                                stylers: {
                                    color: '#f3f3f3'
                                }
                            },
                            {
                                featureType: 'railway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'highway',
                                elementType: 'all',
                                stylers: {
                                    color: '#fdfdfd'
                                }
                            },
                            {
                                featureType: 'highway',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry.fill',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'poi',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'green',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'subway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'manmade',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'local',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'boundary',
                                elementType: 'all',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'building',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'label',
                                elementType: 'labels.text.fill',
                                stylers: {
                                    color: '#999999'
                                }
                            }
                        ]
                    }
                },
                series: [
                    {
                        name: '销售额',
                        type: 'scatter',//散点图
                        coordinateSystem: 'bmap',//百度地图
                        data: [],
                        symbolSize: function (val) {
                            //val为数据值
                            //console.log(val);
                            return val[2].value / 10;
                        },
                        showEffectOn: 'render',//显示特效
                        label: {
                        },
                        emphasis: {
                            scale: true,//是否放大聚焦
                        }
                    }, {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: [],
                        symbolSize: function (val) {
                            return val[2].value / 10;
                        },
                        showEffectOn: 'render',//显示特效
                        rippleEffect: {
                            brushType: 'stroke',//涟漪特效
                            color: 'purple'

                        },
                        itemStyle: {
                            shadowBlur: 10,//阴影模糊度
                            shadowColor: '#333'//阴影颜色
                        },
                        emphasis: {
                            scale: true
                        },
                        //更换颜色
                        color: "rgb(92, 122, 214)",
                        zlevel: 1,
                    }
                ]

            },
            data: [],
            option2: {
                series: [{
                    type: 'liquidFill',
                    data: [0.0233],
                    label: {
                        normal: {
                            fontSize: 50,
                        }
                    },
                    color: ['red'],
                    radius: '90%',
                    outline: {
                        borderDistance: 3,
                        itemStyle: {
                            borderWidth: 3,
                        }
                    }
                }],

                gird: {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                }
            },
            option3: {
                series: {
                    type: 'wordCloud',
                    shape: 'circle',
                    shrinkToFit: true,
                    textStyle: {

                        fontWeight: 'bold',
                        color: function () {
                            // Random color
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';

                        },
                    },
                    data: [
                        {
                            name: "小龙虾",
                            value: 876,
                        },
                        {
                            name: "煎饼果子",
                            value: 871,
                        },
                        {
                            name: "炸鸡腿",
                            value: 712,
                        },
                        {
                            name: "麻辣烫",
                            value: 701,
                        },
                        {
                            name: "汉堡",
                            value: 678,
                        }, {
                            name: "薯条",
                            value: 654,
                        },
                    ]
                },
                gird: {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                }
            }
        }
    },
    mounted() {
        getMapData().then(res => {
            let result = res.data
            for (let i = 0; i < result.city.length; i++) {
                var geoCoord = result.geodata[result.city[i].name];
                if (geoCoord) {
                    this.data.push({
                        name: result.city[i].name,
                        value: geoCoord.concat(result.city[i])
                    });
                }
            }
            this.option1.series[0].data = this.data;
            this.option1.series[1].data = this.data.sort(function (a, b) {
                return b.value[2].value - a.value[2].value;
            }).slice(0, 6);
        })
    },

}

</script> 
<template>
    <div class="footer-card">
        <div class=left>
            <v-chart :option="option1" :style="{ height: '600px', width: '100%' }"></v-chart>
        </div>
        <div class=right>
            <div class="liquidfill">
                <el-card>
                    <div slot="header" class="title">订单同比增长</div>
                    <div style="margin-top: 20px;">
                        <v-chart :option="option2" :style="{ height: '187px', width: '100%' }"></v-chart>
                    </div>
                </el-card>
            </div>
            <div class="keyword" style="margin-top: 20px;">
                <el-card>
                    <div slot="header" class="title">热门搜索</div>
                    <div style="margin-top: 20px;">
                        <v-chart :option="option3" :style="{ height: '167px', width: '100%' }"></v-chart>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template> 
<style scoped>
.footer-card {
    display: flex;
    justify-content: space-between;
    margin: 20px 10px;

}


.left {
    width: 75%;
    height: 100%;
    margin-right: 20px;
}

.right {
    width: 25%;
    height: 100%;

}

.title {
    font-weight: 600;
}
</style>